<template>
  <div class="menu">
    <el-menu class="manage-menu" :default-active="activeMenu" mode="horizontal" active-text-color="#419dbf" active-border-color="#419dbf">
      <el-menu-item index="user" @click="goToUser">人员管理</el-menu-item>
      <el-menu-item index="message" @click="goToMessage">对话管理</el-menu-item>
      <el-menu-item index="ip" @click="goToIP">IP管理</el-menu-item>
      <el-menu-item index="hot" @click="goToHot">热度管理</el-menu-item>
    </el-menu>
    <message v-if="activeMenu==='message'"></message>
    <user v-else-if="activeMenu==='user'"></user>
    <IP v-else-if="activeMenu==='ip'"></IP>
    <Hot v-else-if="activeMenu==='hot'"></Hot>
    <!--< v-else-if="activeMenu==='ip'"></>-->
  </div>
</template>

<script>
import Message from "@/views/manage/Message";
import User from "@/views/manage/User";
import IP from "@/views/manage/IP";
import Hot from "@/views/manage/Hot";
export default {
  components: {Hot, IP, User, Message},
  data() {
    return {
      activeMenu: 'user'
    };
  },
  methods: {
    goToMessage() {
      this.activeMenu = 'message'; // 更新当前激活菜单项
    },
    goToUser(){
      this.activeMenu = 'user'; // 更新当前激活菜单项
    },
    goToIP(){
      this.activeMenu = 'ip'
    },
    goToHot(){
      this.activeMenu = 'hot'
    }

  }
};
</script>
<style>
.menu{
  margin-left: 100px;
  margin-right: 100px;
  overflow: hidden;
}
</style>
